<template>
	<div class="index-container">
		<el-row :gutter="20">
			_uid:{{_uid}}
			<!--最上面的广告条-->
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="false">
				<el-alert v-if="noticeList[0]" :closable="noticeList[0].closable">
					<div style="display: flex; align-items: center; justify-content: center">
						<a target="_blank" href="https://github.com/chuzhixin/vue-admin-beautiful">
							<img style="margin-right: 10px"
								src="https://img.shields.io/github/stars/chuzhixin/vue-admin-beautiful?style=flat-square&label=Stars&logo=github" />
						</a>
						<p v-html="noticeList[0].title"></p>
					</div>
				</el-alert>
			</el-col>

			<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
				<el-card shadow="never">
					<div slot="header">
						<span>访问量</span>
					</div>
					<vab-chart :autoresize="true" theme="vab-echarts-theme" :options="fwl" />
					<div class="bottom">
						<span>
							日均访问量:
							<vab-count :start-val="config1.startVal" :end-val="config1.endVal"
								:duration="config1.duration" :separator="config1.separator" :prefix="config1.prefix"
								:suffix="config1.suffix" :decimals="config1.decimals" />
						</span>
					</div>
				</el-card>
			</el-col>

			<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
				<el-card shadow="never">
					<div slot="header">
						<span>授权数</span>
					</div>
					<vab-chart :autoresize="true" theme="vab-echarts-theme" :options="sqs" />
					<div class="bottom">
						<span>
							总授权数:
							<vab-count :start-val="config2.startVal" :end-val="config2.endVal"
								:duration="config2.duration" :separator="config2.separator" :prefix="config2.prefix"
								:suffix="config2.suffix" :decimals="config2.decimals" />
						</span>
					</div>
				</el-card>
			</el-col>

			<el-col v-for="(item, index) in iconList" :key="index" :xs="12" :sm="6" :md="3" :lg="3" :xl="3">
				<router-link :to="item.link" target="_blank">
					<el-card class="icon-panel" shadow="never">
						<vab-remix-icon :style="{color: item.color,fontSize:'50px',paddingLeft:'6px'}"
							:icon="item.icon">
						</vab-remix-icon>
						<p>{{ item.title }}</p>
					</el-card>
				</router-link>
			</el-col>

			<el-col :xs="24" :sm="24" :md="24" :lg="11" :xl="11">
				<!--依赖信息-->
				<el-card class="card" shadow="never" v-if="false">
					<div slot="header">
						<span>依赖信息</span>
						<div style="float: right">部署时间:{{ updateTime }}</div>
					</div>
					<div class="bottom-btn">
						<el-popover placement="top" width="250" trigger="hover">
							<p>
								这是一个付费群，谢谢您愿意支持开源，加群获取详细文档，群内提供vue-admin-beautiful-template基础模板
							</p>
							<el-image src="/static/img/qrcode.png"></el-image>
							<a slot="reference" target="_blank">
								<el-button type="primary">QQ讨论群</el-button>
							</a>
						</el-popover>
						<a @click="handleChangeTheme">
							<el-button type="danger">修改主题和布局</el-button>
						</a>
						<a target="_blank" href="https://github.com/chuzhixin/vue-admin-beautiful">
							<el-button type="warning">
								github下载源码点star（实时更新）
							</el-button>
						</a>
						<a target="_blank" href="https://gitee.com/chu1204505056/vue-admin-beautiful">
							<el-button type="warning">码云下载源码点star</el-button>
						</a>
						<el-popover placement="top" width="250" trigger="hover">
							<p>谢谢您愿意支持开源，加群获取文档，群内提供基础模板</p>
							<el-image src="/static/img/qrcode.png"></el-image>
							<a slot="reference" target="_blank">
								<el-button type="warning">文档</el-button>
							</a>
						</el-popover>
					</div>
					<table class="table">
						<tr>
							<td>@vue/cli版本</td>
							<td>{{ devDependencies['@vue/cli-service'] }}</td>
							<td>vue版本</td>
							<td>{{ dependencies['vue'] }}</td>
						</tr>
						<tr>
							<td>vuex版本</td>
							<td>{{ dependencies['vuex'] }}</td>
							<td>vue-router版本</td>
							<td>{{ dependencies['vue-router'] }}</td>
						</tr>
						<tr>
							<td>element-ui版本</td>
							<td>{{ dependencies['element-ui'] }}</td>
							<td>axios版本</td>
							<td>{{ dependencies['axios'] }}</td>
						</tr>
						<tr>
							<td>eslint版本</td>
							<td>{{ devDependencies['eslint'] }}</td>
							<td>prettier版本</td>
							<td>{{ devDependencies['prettier'] }}</td>
						</tr>
						<tr>
							<td>sass版本</td>
							<td>{{ devDependencies['sass'] }}</td>
							<td>mockjs版本</td>
							<td>{{ dependencies['mockjs'] }}</td>
						</tr>
						<tr>
							<td>zx-layouts版本</td>
							<td>{{ dependencies['zx-layouts'] }}</td>
							<td>lodash版本</td>
							<td>{{ dependencies['lodash'] }}</td>
						</tr>
					</table>
				</el-card>

				<el-card shadow="never">
					<div slot="header">
						<span>其他信息</span>
					</div>
					<div style="text-align: center">
						<vab-colorful-icon style="font-size: 140px" icon-class="vab" />
						<h1 style="font-size: 30px">{{projectName}}</h1>
					</div>
					<div v-for="(item, index) in noticeList" :key="index">
						<el-alert v-if="index !== 0" :title="item.title" :type="item.type" :closable="item.closable">
						</el-alert>
						<br />
					</div>
					<el-alert :closable="false" :title="userAgent" type="info"></el-alert>
					<br />
				</el-card>

				<plan></plan>
			</el-col>

			<el-col :xs="24" :sm="24" :md="13" :lg="13" :xl="13">
				<el-card class="card" shadow="never">
					<div slot="header">
						<span>更新日志</span>
					</div>
					<el-timeline :reverse="reverse">
						<el-timeline-item v-for="(activity, index) in activities" :key="index"
							:timestamp="activity.timestamp" :color="activity.color">
							{{ activity.content }}
						</el-timeline-item>
					</el-timeline>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import VabChart from 'vue-echarts'

	import VabColorfulIcon from "@/pages/common/zxlayout/VabColorfulIcon.vue";
	import {
		dependencies,
		devDependencies
	} from '../../package.json';
	import Plan from '@/pages/common/components/Plan.vue'
	import common from "@/common/common.js";

	export default {
		name: 'index',
		mixins: [common.baseVM],
		components: {
			VabChart,
			Plan,
			VabColorfulIcon
		},
		computed: {
			projectName: function() {
				return this.$store.state.projectName;
			}
		},
		data() {
			return {
				timer: 0,
				updateTime: process.env.VUE_APP_UPDATE_TIME,
				nodeEnv: process.env.NODE_ENV,
				dependencies: dependencies,
				devDependencies: devDependencies,
				config1: {
					startVal: 0,
					endVal: common.lodash.random(20000, 60000),
					decimals: 0,
					prefix: '',
					suffix: '',
					separator: ',',
					duration: 8000,
				},
				config2: {
					startVal: 0,
					endVal: common.lodash.random(1000, 20000),
					decimals: 0,
					prefix: '',
					suffix: '',
					separator: ',',
					duration: 8000,
				},
				config3: {
					startVal: 0,
					endVal: common.lodash.random(1000, 20000),
					decimals: 0,
					prefix: '',
					suffix: '',
					separator: ',',
					duration: 8000,
				},

				//访问量
				fwl: {
					grid: {
						top: '4%',
						left: '2%',
						right: '4%',
						bottom: '0%',
						containLabel: true,
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						data: [],
						axisTick: {
							alignWithLabel: true,
						},
					}, ],
					yAxis: [{
						type: 'value',
					}, ],
					series: [{
						name: '访问量',
						type: 'line',
						data: [],
						smooth: true,
						areaStyle: {},
					}, ],
				},
				//授权数
				sqs: {
					grid: {
						top: '4%',
						left: '2%',
						right: '4%',
						bottom: '0%',
						containLabel: true,
					},
					xAxis: [{
						type: 'category',
						/*boundaryGap: false,*/
						data: ['0时', '4时', '8时', '12时', '16时', '20时', '24时'],
						axisTick: {
							alignWithLabel: true,
						},
					}, ],
					yAxis: [{
						type: 'value',
					}, ],
					series: [{
						name: '授权数',
						type: 'bar',
						barWidth: '60%',
						data: [10, 52, 20, 33, 39, 33, 22],
					}, ],
				},
				//词云
				cy: {
					grid: {
						top: '4%',
						left: '2%',
						right: '4%',
						bottom: '0%',
					},
					series: [{
						type: 'wordCloud',
						gridSize: 15,
						sizeRange: [12, 40],
						rotationRange: [0, 0],
						width: '100%',
						height: '100%',
						textStyle: {
							normal: {
								color() {
									const arr = [
										'#5470c6',
										'#91cc75',
										'#fac858',
										'#ee6666',
										'#73c0de',
										'#975FE5',
									]
									let index = Math.floor(Math.random() * arr.length)
									return arr[index]
								},
							},
						},
						data: [{
								name: 'vue-admin-beautiful',
								value: 15000,
							},
							{
								name: 'element',
								value: 10081,
							},
							{
								name: 'beautiful',
								value: 9386,
							},

							{
								name: 'vue',
								value: 6500,
							},
							{
								name: 'chuzhixin',
								value: 6000,
							},
							{
								name: 'good',
								value: 4500,
							},
							{
								name: 'success',
								value: 3800,
							},
							{
								name: 'never',
								value: 3000,
							},
							{
								name: 'boy',
								value: 2500,
							},
							{
								name: 'girl',
								value: 2300,
							},
							{
								name: 'github',
								value: 2000,
							},
							{
								name: 'hbuilder',
								value: 1900,
							},
							{
								name: 'dcloud',
								value: 1800,
							},
							{
								name: 'china',
								value: 1700,
							},
							{
								name: '1204505056',
								value: 1600,
							},
							{
								name: '972435319',
								value: 1500,
							},
							{
								name: 'young',
								value: 1200,
							},
							{
								name: 'old',
								value: 1100,
							},
							{
								name: 'vuex',
								value: 900,
							},
							{
								name: 'router',
								value: 800,
							},
							{
								name: 'money',
								value: 700,
							},
							{
								name: 'qingdao',
								value: 800,
							},
							{
								name: 'yantai',
								value: 9000,
							},
							{
								name: 'author is very cool',
								value: 9200,
							},
						],
					}, ],
				},

				//更新日志
				reverse: true,
				activities: [],
				noticeList: [],
				//其他信息
				userAgent: navigator.userAgent,
				//卡片图标
				iconList: [{
						icon: 'video-line',
						title: '视频播放器',
						link: '/vab/player',
						color: '#ffc069',
					},
					{
						icon: 'table-2',
						title: '表格',
						link: '/pagesX/table',
						color: '#5cdbd3',
					},
					{
						icon: 'computer-line',
						title: '源码',
						link: 'https://github.com/chuzhixin/vue-admin-beautiful',
						color: '#b37feb',
					},
					{
						icon: 'book-line',
						title: '书籍',
						link: '',
						color: '#69c0ff',
					},
					{
						icon: 'file-info-line',
						title: '公告',
						link: '',
						color: '#ff85c0',
					},
					{
						icon: 'gift-line',
						title: '礼物',
						link: '',
						color: '#ffd666',
					},

					{
						icon: 'scales-line',
						title: '公平的世界',
						link: '',
						color: '#ff9c6e',
					},
					{
						icon: 'rest-time-line',
						title: '休息一下',
						link: '',
						color: '#95de64',
					},
				],
			}
		},
		created() {
			this.fetchData()
		},
		beforeDestroy() {
			clearInterval(this.timer)
		},
		mounted() {
			let base = +new Date(2020, 1, 1)
			let oneDay = 24 * 3600 * 1000
			let date = []

			let data = [Math.random() * 1500]
			let now = new Date(base)

			const addData = (shift) => {
				now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
				date.push(now)
				data.push(common.lodash.random(20000, 60000))

				if (shift) {
					date.shift()
					data.shift()
				}

				now = new Date(+new Date(now) + oneDay)
			}

			for (let i = 1; i < 6; i++) {
				addData()
			}
			addData(true)
			this.fwl.xAxis[0].data = date
			this.fwl.series[0].data = data
			this.timer = setInterval(() => {
				addData(true)
				this.fwl.xAxis[0].data = date
				this.fwl.series[0].data = data
			}, 3000)
		},
		methods: {
			handleClick(e) {
				this.$baseMessage(`点击了${e.name},这里可以写跳转`)
			},
			handleZrClick(e) {},
			handleChangeTheme() {
				this.$baseEventBus.$emit('theme')
			},
			async getList() {
				return {
					"code": 200,
					"msg": "success",
					"totalCount": 999,
					"data": [{
						"content": "在github上获得了第一个star，感恩一位名叫Bequiet2014的github用户",
						"timestamp": "2020-03-23"
					}, {
						"content": "增加更换主题功能",
						"timestamp": "2020-04-10"
					}, {
						"content": "大幅精简代码",
						"timestamp": "2020-04-14"
					}, {
						"content": "修复群友反馈的bug",
						"timestamp": "2020-04-16"
					}, {
						"content": "剔除maptalks",
						"timestamp": "2020-04-17"
					}, {
						"content": "换行符统一修改为lf 支持苹果 linux windows协同开发 强制开启最严格eslint规则 不要哭 严格是有好处的",
						"timestamp": "2020-04-17"
					}, {
						"content": "彻底完成手机端适配,记录这一天熬夜到了晚上三点",
						"timestamp": "2020-04-18"
					}, {
						"content": "删除babel-polyfill 提高打包速度 减少压缩体积（放弃ie是这个项目做出的最伟大的决定）",
						"timestamp": "2020-04-18"
					}, {
						"content": "源码精简至800k",
						"timestamp": "2020-04-19"
					}, {
						"content": "添加视频播放器组件",
						"timestamp": "2020-04-20"
					}, {
						"content": "修复路由懒加载 完善主题配色",
						"timestamp": "2020-04-22"
					}, {
						"content": "修复全局axios拦截 加快动画展示效果 修改登录页样式",
						"timestamp": "2020-04-24"
					}, {
						"content": "简化权限与登录逻辑 更新mockServer",
						"timestamp": "2020-04-25"
					}, {
						"content": "优化登录退出逻辑 代码更清晰 退出不再重载网页 改为重载路由形式",
						"timestamp": "2020-04-26"
					}, {
						"content": "无端的指责只会让我更加努力 修复sidebar 简化permission",
						"timestamp": "2020-04-28"
					}, {
						"content": "又是一个深夜 实现了表格增删改查的一键生成",
						"timestamp": "2020-04-30"
					}, {
						"content": "大幅优化tagsview标签动画",
						"timestamp": "2020-05-02"
					}, {
						"content": "三种图标组件实现mock模拟分页",
						"timestamp": "2020-05-03"
					}, {
						"content": "添加了markdown编辑器组件",
						"timestamp": "2020-05-04"
					}, {
						"content": "添加stylelint-plus自动规整排序样式",
						"timestamp": "2020-05-06"
					}, {
						"content": "添加商城模板",
						"timestamp": "2020-05-12"
					}, {
						"content": "github标星超过1000 感恩",
						"timestamp": "2020-05-13"
					}, {
						"content": "添加验证码组件",
						"timestamp": "2020-05-14"
					}, {
						"content": "修复横向菜单bug",
						"timestamp": "2020-05-16"
					}, {
						"content": "又被人骂了 挺好的 让我下定决心重写了tabsBar",
						"timestamp": "2020-05-20"
					}, {
						"content": "仿ant-design 添加雪花屏",
						"timestamp": "2020-05-26"
					}, {
						"content": "添加人员管理模块",
						"timestamp": "2020-06-02"
					}, {
						"content": "github标星超过2000 感恩",
						"timestamp": "2020-06-03"
					}, {
						"content": "添加炫酷地图组件",
						"timestamp": "2020-06-11"
					}, {
						"content": "抽离更多公共配置，框架使用更顺手",
						"timestamp": "2020-06-19"
					}, {
						"content": "彻底完成了tabsBar多标签页的重构",
						"timestamp": "2020-06-22"
					}, {
						"content": "感恩github标星过3.0K 祝大家端午节快乐",
						"timestamp": "2020-06-25"
					}, {
						"content": "彻底重构了SideBar与TopBar 大幅精简dom渲染逻辑 全球首发",
						"timestamp": "2020-06-25"
					}, {
						"content": "添加菜单管理",
						"timestamp": "2020-07-7"
					}, {
						"content": "首次采用sass-loader 9.0写法，感谢github用户 shaonialife",
						"timestamp": "2020-07-7"
					}, {
						"content": "添加vue-amap组件",
						"timestamp": "2020-07-11"
					}, {
						"content": "修改zx-layouts引入方式",
						"timestamp": "2020-07-15"
					}, {
						"content": "记录这一天vue-admin-beautiful在插件市场、百度已花费超过1万元广告费用，希望一切都值得",
						"timestamp": "2020-07-18"
					}, {
						"content": "主题配置添加绿荫草场、荣耀典藏、暗黑之子模式",
						"timestamp": "2020-07-18"
					}, {
						"content": "全局axios请求全面支持Status Code拦截处理",
						"timestamp": "2020-07-29"
					}, {
						"content": "重构全局loadding加载代码",
						"timestamp": "2020-07-31"
					}, {
						"content": "升级stylelint自动排序功能",
						"timestamp": "2020-08-25"
					}, {
						"content": "修复视频播放器组件重载路由失效的bug",
						"timestamp": "2020-09-03"
					}, {
						"content": "修复极个别情况image-loader打包报错",
						"timestamp": "2020-09-18"
					}, {
						"content": "全网首个基于vue3.0开发的admin框架已发布，具体请访问github",
						"timestamp": "2020-09-22"
					}, {
						"content": "完善路由后端渲染方案，弃用之前写法",
						"timestamp": "2020-09-30"
					}, {
						"content": "大版本迭代，请关注github tag",
						"timestamp": "2020-09-30"
					}, {
						"content": "凌晨两点，我累了，移除无用组件，精简package",
						"timestamp": "2020-10-02"
					}, {
						"content": "富文本编辑器支持精细化配置",
						"timestamp": "2020-10-20"
					}, {
						"content": "公共布局支持自动导出",
						"timestamp": "2020-10-23"
					}, {
						"content": "遮罩添加高斯模糊",
						"timestamp": "2020-10-25"
					}, {
						"content": "vue3.0 + element-plus版本正式上线",
						"timestamp": "2020-12-5"
					}, {
						"content": "完成首页重构，跟进echarts 5.0",
						"timestamp": "2020-12-7"
					}, {
						"content": "更新sass版本至最新",
						"timestamp": "2021-1-7"
					}, {
						"content": "更新vue-echarts版本至最新,options变更为option",
						"timestamp": "2021-2-23"
					}, {
						"content": "开源版品牌名升级为vue-admin-beautiful-pro，付费版vue2.x品牌升级为Admin Pro，付费版vue3.x品牌名升级为Admin Plus",
						"timestamp": "最近更新"
					}]
				}
			},
			async getNoticeList() {
				return {
					"code": 200,
					"msg": "success",
					"data": [{
						"title": "温馨提示：集成版虽功能丰富，但冗余依赖过多，建议开发时使用基础版进行开发 Vab Admin Plus（vue3.0 + element-plus）已发布，欢迎体验：<a target=\"_blank\" href=\"https://chu1204505056.gitee.io/admin-plus/?hmsr=homeAd&hmpl=&hmcu=&hmkw=&hmci=#/index\">Vab Admin Plus</a>",
						"closable": false,
						"type": "success"
					}, {
						"title": "作者寄语：感谢Star，感恩相遇，愿世间美好与我们环环相扣，加油！屏幕前的我们，打破桎梏，坚守初心。其实人生改变命运的机会并没有太多，我们并不是不优秀，我们也并不是一无是处，我们也希望驻足山巅被众人仰望，也许我们缺少的只是一个机会，缺少的只是生命中的导师，我希望这个框架帮助到更多的人，希望有一天，我们面试的时候不再胆怯，希望有一天别人看到的不仅仅是你的努力，还有你的功成名就，出人头地。",
						"closable": false,
						"type": "warning"
					}, {
						"title": "随笔：我一直在寻找开源的真谛，我一直再想什么是开源，我一开始觉得免费就是开源，好像又不是。我理解的开源是：你也开源，我也开源，大家一起贡献，相互帮助。我最担心的事情是：我一个小人物，去伺候一众的伸手党，我想，这不是开源该有的氛围。我还太年轻，不懂什么是格局，我只知道，无私的帮助他人，能给我带来快乐，却不能给我带来收入，当然，有时候，快乐对我来说就已经足够了。可惜我是一个人，没有精力帮助到每一个人，可惜这个世界需要赚钱，才能过上平凡的生活，可惜了我的梦想，这个物欲横流的时代，理想主义的我们，即使内心坚决如铁，也似乎寸步难行。",
						"closable": false,
						"type": "success"
					}]
				};
			},
			async fetchData() {
				const {
					data
				} = await this.getList()
				data.map((item, index) => {
					if (index === data.length - 1) {
						item.color = '#0bbd87'
					}
				})
				this.activities = data
				const res = await this.getNoticeList()
				this.noticeList = res.data
				/* getRepos({
					token: "1061286824f978ea3cf98b7b8ea26fe27ba7cea1",
				  }).then((res) => {
					const per_page = Math.ceil(res.data.stargazers_count / 100);
					alert(per_page);
					getStargazers({
					  token: "1061286824f978ea3cf98b7b8ea26fe27ba7cea1",
					  page: 1,
					  per_page: res.per_page,
					}).then((res) => {
					  alert(JSON.stringify(res));
					});
				  }); */
			},
		},
	}
</script>
<style lang="scss" scoped>
	@import "@/css/variables.scss";

	.index-container {
		// padding: 0 !important;
		// margin: 0 !important;
		background: #f5f7f8 !important;

		::v-deep {
			.el-alert {
				padding: $base-padding;

				&--info.is-light {
					min-height: 82px;
					padding: $base-padding;
					margin-bottom: 15px;
					color: #909399;
					background-color: $base-color-white;
					border: 1px solid #ebeef5;
				}
			}

			.el-card__body {
				.echarts {
					width: 100%;
					height: 115px;
				}
			}
		}

		.card {
			::v-deep {
				.el-card__body {
					.echarts {
						width: 100%;
						height: 305px;
					}
				}
			}
		}

		.bottom {
			padding-top: 20px;
			margin-top: 5px;
			color: #595959;
			text-align: left;
			border-top: 1px solid $base-border-color;
		}

		.table {
			width: 100%;
			color: #666;
			border-collapse: collapse;
			background-color: #fff;

			td {
				position: relative;
				min-height: 20px;
				padding: 9px 15px;
				font-size: 14px;
				line-height: 20px;
				border: 1px solid #e6e6e6;

				&:nth-child(odd) {
					width: 20%;
					text-align: right;
					background-color: #f7f7f7;
				}
			}
		}

		.icon-panel {
			height: 117px;
			text-align: center;
			cursor: pointer;

			svg {
				font-size: 40px;
			}

			p {
				margin-top: 10px;
			}
		}

		.bottom-btn {
			button {
				margin: 5px 10px 15px 0;
			}
		}
	}
</style>
